<template>

  <el-carousel height="600px" >
    <el-carousel-item v-for="url in bannerArr" >
      <img :src="url" style="width:100%;height:100%;">
    </el-carousel-item>
  </el-carousel>



  <div class="main">
    <!--    标签-->
    <div class="container-tit">
      <div class="container-tit-p1"><img src="/imgs/scene/index_05.jpg"/>
        <p>旅游景区</p></div>
      <div class="container-tit-p1"><img src="/imgs/scene/index_05.jpg"/>
        <p>美景展示</p></div>
      <div class="container-tit-p2"><img src="/imgs/scene/index_05.jpg" style="padding-left:100px;"/>
        <p>亲子旅游</p></div>
      <div class="container-tit-p3"><img src="/imgs/scene/index_05.jpg"/>
        <p>旅游攻略</p></div>
    </div>
    <!--    景区-->
    <div class="lvjq">
      <div class="title">
        <p><i>S</i><b>旅游景区</b><span>scenic</span></p>
        <router-link to="additionArea" style="text-decoration: none;">+</router-link>
      </div>
    </div>
    <el-row :gutter="2">
      <el-col :span="6" v-for="p in sceneArr" style="margin:10px 0;">
        <el-card style="padding-bottom:20px;">
          <router-link :to="{ path:'/xqy', query:{ id: p.id }}">
            <div class="fengmian">
              <img :src="p.imgUrl" alt="" style="height: 212px;width: 290px;"class="product-image">
            </div>
          </router-link>
          <p style="margin: 10px;width: 362px;height: 63px;">{{p.sintroduction}}</p>
          <h3>{{p.name}}</h3>
          <div>
               <span style="float:left;color:red;">
                 ¥{{p.price}}
               </span>

            <span style="float: right;">出发地:{{p.departure}}</span>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!--景区展示-->
    <div class="lvjq">
      <div class="title">
        <p><i>S</i><b>美景展示</b><span>scenic</span></p>
      </div>
    </div>


    <div class="shell">
      <div class="box">
        <img src="/imgs/scene/djy.jpd.webp">
        <span>九寨沟</span>
      </div>
      <div class="box">
        <img src="/imgs/scene/ems2.jpg">
        <span>康定</span>
      </div>
      <div class="box">
        <img src="/imgs/scene/Qcs.jpg">
        <span>都江堰</span>
      </div>
      <div class="box">
        <img src="/imgs/scene/10.jpg">
        <span>稻城亚丁</span>
      </div>
      <div class="box">
        <img src="/imgs/scene/Lsdf.jpg">
        <span>乐山大佛</span>
      </div>
    </div>



    <!--    旅游展示-->
    <div class="qzly">
      <div class="title">
        <p><i>G</i><b>优秀导游</b><span>guide</span></p>
      </div>
      <div class="shell1">

        <div class="person1">

          <div class="box1">
            <img class="circle1" src="/imgs/scene/background.png" />
            <img class="img1" src="/imgs/scene/dy21.png" />
          </div>

          <div class="wire1"></div>
          <div class="name1">李小美</div>
          <div class="birthday1">April 12, 1996</div>
        </div>

        <div class="person1">
          <div class="box1">
            <img class="circle1" src="/imgs/scene/background.png" />
            <img class="img1" src="/imgs/scene/dy25.png" />
          </div>
          <div class="wire1"></div>
          <div class="name1">张小帅</div>
          <div class="birthday1">January 19, 1994</div>
        </div>

        <div class="person1">

          <div class="box1">
            <img class="circle1" src="/imgs/scene/background.png" />
            <img class="img1" src="/imgs/scene/dy22.png" />
          </div>
          <div class="wire1"></div>
          <div class="name1">赵大美</div>
          <div class="birthday1">November 18, 1993</div>
        </div>

        <div class="person1">
          <div class="box1">
            <img class="circle1" src="/imgs/scene/background.png" />
            <img class="img1" src="/imgs/scene/dy24.png" />
          </div>
          <div class="wire1"></div>
          <div class="name1">王大帅</div>
          <div class="birthday1">September 21, 1997</div>
        </div>



      </div>

    </div>

    <div class="lvjq">
      <div class="title">
        <p><i>S</i><b>旅游攻略</b><span>scenic</span></p>
      </div>
    </div>

    <div class="shell2">

      <div class="box2 img2" style="background-image: url('/imgs/scene/lvgl07.jpg')">
        <router-link to="Strategy3" style="text-decoration: none;">
          <div class="text2">
            <header>
              <span class="title2">NO.</span>
              <span class="num2">1</span>
            </header>
            <p  style=" text-decoration: none;color: white" >
              超全干货賞第一次去川西稻城亚丁旅行的看今年的暑假一定要去趟川西去稻城亚丁挑战雪山下的牛奶海去四姑娘山感受东方瑞士的美，
              去鱼子西邂逅日照金山去塔公草原奔跑在绿油油的草甸上一带你一起看最美的风景，
              拍各种好看的照片，认识一群志同道合的好朋友
            </p>
          </div>
        </router-link>
      </div>

      <div class="box2 img2" style="background-image: url('/imgs/scene/lvgl01.jpg')">
        <router-link to="Strategy" style="text-decoration: none;">
          <div class="text2">
            <header>
              <span class="title2">NO.</span>
              <span class="num2">2</span>
            </header>
            <p>
              来了成都感觉回到了杭州，有种亲切感，但是和杭州一比，成都的美食《可太丰富了，而且完全有给游客选择不辣、"的机会，
              (之前西昌吃的是真不习惯点的炸酱面，土豆牛肉饭啥的上来都是巨辣的
            </p>
          </div>
        </router-link>
      </div>

      <div class="box2 img3" style="background-image: url('/imgs/scene/lvgl06.jpg')">
        <router-link to="Strategy4" style="text-decoration: none;">
          <div class="text2">
            <header>
              <span class="title2">NO.</span>
              <span class="num2">3</span>
            </header>
            <p>
              峨眉山，作为四川的顶流景区之一!我几乎每年都会去一次，每一个季节峨眉山都有不同的美!这里总结了一下峨眉山的攻略，
              建议收藏!最重要的就是看天气!!天气不好啥也没有!
            </p>
          </div>
        </router-link>
      </div>
      <div class="box2 img4" style="background-image: url('/imgs/scene/lvgl05.jpg')">
        <router-link to="Strategy2" style="text-decoration: none;">
          <div class="text2" >
            <header>
              <span class="title2">NO</span>
              <span class="num2">4</span>
            </header>
            <p>
              成都往返九寨沟，自由行真的很简单
              两天一夜打卡九寨沟全部景点，还有时间拍了藏族写真照。九寨沟路途远，一天必定很累，
              专门安排了九寨沟两天游，悄咪咪住在景区民宿一晚，省下一天门票钱，还省下来多次往返景区的疲惫。
            </p>
          </div>
        </router-link>
      </div>


    </div>









  </div>


</template>
<script  setup>

import {onMounted, ref} from "vue";
import {ElMessage} from "element-plus";
import qs from "qs";


const bannerArr = ref(["/imgs/scene/06.jpg","/imgs/scene/08.jpg","/imgs/scene/10.jpg","/imgs/scene/_20221008120156.jpg"])
// 旅游卡片数组
const productArr = ref([
  {title: "位于成都以南的峨眉山是佛教名山之一，素有“天下第一山”的美誉",
    price:400,
    city:"成都",
    url:"/imgs/scene/ems.jpg",
  },
  {title: "位于成都以南的峨眉山是佛教名山之一，素有“天下第一山”的美誉",price:400,city:"成都",url:"/imgs/scene/ems.jpg"},
  {title: "位于成都以南的峨眉山是佛教名山之一，素有“天下第一山”的美誉",price:400,city:"成都",url:"/imgs/scene/kd.jpg"},
  {title: "位于成都以南的峨眉山是佛教名山之一，素有“天下第一山”的美誉",price:400,city:"成都",url:"/imgs/scene/HL.jpg"},
  {title: "位于成都以南的峨眉山是佛教名山之一，素有“天下第一山”的美誉",price:400,city:"成都",url:"/imgs/scene/lsdf.jpg"},
  {title: "位于成都以南的峨眉山是佛教名山之一，素有“天下第一山”的美誉",price:400,city:"成都",url:"/imgs/scene/Qcs.jpg"},
  {title: "位于成都以南的峨眉山是佛教名山之一，素有“天下第一山”的美誉",price:400,city:"成都",url:"/imgs/scene/sgns2.jpg"},
  {title: "位于成都以南的峨眉山是佛教名山之一，素有“天下第一山”的美誉",price:400,city:"成都",url:"/imgs/scene/dc.jpg"}

])
//旅游卡片
const sceneArr =ref([]);
const searchSceneForm = ref({name: '', id: ''});

const loadArea = ()=>{
  let data = qs.stringify(searchSceneForm.value);
  axios.get( BASE_URL+'/yyt/scene/select',data).then((response)=>{
    if (response.data.code==2000){
      sceneArr.value=response.data.data;
      console.log(sceneArr.value)
    }else {
      ElMessage.error('失败');
    }
  })

}
onMounted(() => {
  loadArea();
})






</script>


<style scoped>


.fengmian{
  height: 212px;
  width: 290px;
  margin: auto;
}
.shell2 {
  height: 100vh;
  display: flex;
}

.box2 {
  flex: 1;
  min-width: 0;
  box-shadow: -20px 0 20px 5px rgba(255, 255, 255, 0.7);
  transition: flex 0.8s;
  background-size: cover;
  background-position: center;
  display: grid;
  place-items: center;
  border: 10px solid #fff;
}

.box2:hover {
  flex: 2;
}

.box2:hover .text2 {
  animation: appear 0.8s forwards 0.3s;
}



.text2 {
  padding: 45px 75px;
  opacity: 0;
  color: rgb(255, 255, 255);
  height: 380px;
  width: 600px;
  background-color: rgba(0, 0, 0, 0.5);
}

header {
  height: 73px;
  font-size: 65px;

  line-height: 65px;
  font-weight: bold;
  border-bottom: 2px solid white;
}

.title2 {
  display: inline-block;
  height: 65px;
  text-decoration: underline;
  text-underline-offset: 10px;
  text-decoration-thickness: 4px;
}

.num2 {
  margin-left: -18px;
}

.text2 p {
  margin: 30px 0;
  font-size: 30px;
}

@keyframes appear {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}







.shell1 {
  display: flex;
  justify-content: center;
  align-items: center;
}

.person1 {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 300px;
  margin:0 50px;
}

.box1 {

  clip-path: inset(0px 0px 0px 0px round 0px 0px 520px 520px);
  height: 500px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.circle1 {
  border-radius: 50%;
  width: 100%;
  position: absolute;
  bottom: 0;
  transition: transform .3s;
}

.img1 {
  position: relative;
  width: 80%;
  transform: translateY(80px);
  transition: transform .3s;
}

.box1:hover .img1 {
  transform: translateY(26px) scale(1.2);
}

.box1:hover .circle {
  transform: rotate(20deg);
}

.wire1 {
  background-color: rgb(200, 115, 123);
  height: 2px;
  width: 200px;
  margin: 20px 0 20px 0;
}

.name1 {
  color: #404245;
  font-size: 36px;
  font-weight: 600;
}

.birthday1 {
  color: #6e6e6e;
  font: 100 14px 'arial';
  /* 斜体 */
  font-style: italic;
}


.product-image {
  /* 初始状态，你可以根据需要调整这些值 */
  width: 100%;
  height: auto; /* 让图片保持其原始的宽高比 */
  transition: transform 0.5s ease-in-out; /* 添加过渡效果 */
}

.product-image:hover {
  /* 悬停状态，图片放大到1.2倍（你可以根据需要调整这个值） */
  transform: scale(1.2);
}




.main {
  //width: 1000px;
  height: auto;
  margin: 0 auto;
}

.container-tit {
  padding: 15px 0px;
  background-color: #258e39;
  height: 60px;
  width: 1800px;
}

.container-tit img {
  float: left;
  padding-left: 60px;
}

.container-tit div {
  float: left;
  color: #fff;
  font-size: 22px;
  font-weight: bold;
  height: 59px;
  line-height: 59px;
}

.container-tit div p {
  text-indent: 10px;
  cursor: pointer;
}

.container-tit-p1 {
  height: 59px;
  float: left;
  background: #258e39;
  width: 380px;
}

.container-tit-p2 {
  height: 59px;
  float: left;
  background: #258e39;
  width: 380px;
}

.container-tit-p3 {
  height: 59px;
  float: left;
  background: #258e39;
  width: 380px;
}

p {
  margin: 0px;
  padding: 0px;
}

.lvjq {
  margin: 0 auto;
}

.title {
  padding-top: 20px;
  position: relative;
  padding-bottom: 10px;
}

.title i {
  font-style: normal;
  font-size: 35px;
  color: #258e39;
  padding: 0px 3px;
  font-weight: bold;
}

.title b {
  font-style: normal;
  font-size: 30px;
  padding: 0px 3px;
}

.title span {
  font-size: 25px;
  color: #a5a5a5;
  padding: 0px 3px;
  text-transform: uppercase;
}

.sideMenu {
  width: 300px;
  float: right;
}

.sideMenu h3 {
  height: 32px;
  line-height: 32px;
  padding-left: 10px;
  border-top: 1px dashed #e3e3e3;
  cursor: pointer;
  font: normal 14px/32px "Microsoft YaHei";
}

.sideMenu h3 img {
  padding-top: 9px;
  padding-right: 7px;
}

.sideMenu ul {
  padding: 8px 10px;
  height: 80px;
  color: #999;
  display: none; /* 默认都隐藏 */
}

.sideMenu ul img {
  border: 1px solid #ccc;
  display: block;
  float: left;
}

.sideMenu-t {
  height: 70px;
  width: 143px;
  display: block;
  float: right;
  background: #f0f0f0;
  padding: 5px;
  overflow: hidden;
}

.sideMenu-t b {
  font-size: 14px;
  padding: 2px 0;
}

.sideMenu-t span {
  display: block;
  line-height: 19px;
}

.content2-main {
  width: 100%;
  text-align: left;
  float: left;
  border: 1px solid #ddd;
}
.shell{
  width: 90%;
  height: 700px;
  display: flex;
}
.box{
  flex: 1;
  overflow: hidden;
  transition: .5s;
  margin: 0 20px;
  box-shadow: 10px 10px 20px rgba(0, 0, 0, .5);
  border-radius: 20px;
  border: 10px solid #fff;
  background-color: #fff;
}
.box>img{
  width: 200%;
  height: 85%;
  object-fit: cover;
  transition: .5s;
}
.box>span{
  font: 200 45px '优设标题黑';
  text-align: center;
  height: 15%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box:hover{
  flex-basis: 40%;
}
.box:hover>img{
  width: 100%;
  height: 100%;
}

</style>